<template>
	<view>
		<view class="login-container">
			<u-toast ref="uToast"></u-toast>
			<view class="login-card">
				<view class="login-header">
					<text class="app-name">场快订</text>
					<text class="app-slogan">好场地，随时约</text>
				</view>
				<u--form labelPosition="left" :model="model" :rules="rules" ref="registerForm">
					<u-form-item prop="registerForm.userName" leftIcon="account-fill" borderBottom>
						<u--input v-model="model.registerForm.userName" border="none" placeholder="请输入用户名"
							class="input-field"></u--input>
					</u-form-item>
					<u-form-item prop="registerForm.password" leftIcon="lock-fill" borderBottom>
						<u--input v-model="model.registerForm.password" password border="none" placeholder="请输入密码"
							class="input-field"></u--input>
					</u-form-item>
					<!-- 			<u-form-item prop="registerForm.email" leftIcon="email-fill" borderBottom>
						<u--input v-model="model.registerForm.email" border="none" placeholder="请输入邮箱"
							class="input-field"></u--input>
					</u-form-item> -->
					<!-- <u-form-item prop="registerForm.code" leftIcon="chat-fill" borderBottom>
						<view class="code-input">
							<u--input v-model="model.registerForm.code" border="none" placeholder="请输入验证码"
								class="input-field"></u--input>
							<image :src="codeUrl" @click="getCode" class="code-img"/>
						</view>
					</u-form-item> -->
				</u--form>
				<view class="login-actions">
					<u-button type="primary" shape="circle" class="login-button" @click="register()">注
						册</u-button>
					<view class="register-link">
						已有账号？<text class="link-text" @click="toLogin()">立即登录</text>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<div>Copyright © 2024 HelloDam All Rights Reserved.</div>
			<a href="https://beian.miit.gov.cn/" target="_blank" class="footer-link">粤ICP备2024309875号-1</a>
		</view>
	</view>
</template>

<script>
	import {
		getCodeImg,
		register
	} from "@/api/login";

	import {
		hasUserName
	} from "@/api/user";

	export default {
		data() {
			return {
				model: {
					registerForm: {
						userName: '',
						password: '',
						email: ''
					}
				},
				rules: {
					'registerForm.userName': [{
							type: 'string',
							required: true,
							message: '请填写用户名',
							trigger: ['blur', 'change']
						},
						{
							validator: this.validateUsername,
							message: '用户名已存在',
							trigger: ['blur']
						}
					],
					'registerForm.password': {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
					'registerForm.email': {
						type: 'string',
						required: true,
						pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
						message: '请输入有效邮箱地址',
						trigger: ['blur', 'change']
					}
				}
			}
		},
		methods: {
			// 校验用户名是否存在
			async validateUsername(rule, value, callback) {
				if (!value) {
					callback(new Error('请填写用户名'));
					return;
				}

				try {
					const res = await hasUserName(value);
					if (res.data) { // 假设API返回的data为true表示用户名已存在
						callback(new Error('用户名已存在'));
					} else {
						callback();
					}
				} catch (error) {
					console.error('校验用户名出错:', error);
					callback(new Error('校验用户名失败，请重试'));
				}
			},

			register() {
				uni.removeStorageSync('userName');
				uni.removeStorageSync('password');
				uni.removeStorageSync('email');

				this.$refs.registerForm.validate().then(res => {
					console.log("注册：");
					register(this.model.registerForm.userName, this.model.registerForm.password, this.model
						.registerForm.email).then(
						res => {
							this.$refs.uToast.show({
								type: 'success',
								message: "注册成功，为您跳转到登录页面"
							})
							uni.setStorageSync('userName', this.model.registerForm.userName);
							uni.setStorageSync('password', this.model.registerForm.password);
							setTimeout(() => {
							  this.toLogin();
							}, 1000);
						}).catch(res => {
						this.$refs.uToast.show({
							type: 'error',
							message: res.msg
						})
					})
				}).catch(errors => {
					console.error('验证失败详情:', errors);
					this.$refs.uToast.show({
						type: 'error',
						message: "表单数据校验失败，请检查后再试"
					})
				})
			},

			toIndex() {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			},
			toLogin() {
				uni.reLaunch({
					url: "/pages/login/login"
				})
			}
		}
	}
</script>

<style lang="scss">
	.login-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 100vh;
		padding: 0 40rpx;
		// background-image: url('@/static/login/background.png');
		background-image: url('https://hellodam.website:7049/pic/2025/5/6/background.png');
		background-size: 100% auto;
		/* 高度100%匹配容器，宽度自动保持比例 */
		background-position: center;
		background-repeat: no-repeat;
		background-color: #f5f7fa;
		/* 背景色作为回退 */
	}

	.login-card {
		width: 100%;
		max-width: 80%;
		background: #ffffff;
		padding: 60rpx 50rpx;
		border-radius: 20rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 147, 233, 0.1);
		transition: all 0.3s ease;
	}

	.login-header {
		text-align: center;
		margin-bottom: 60rpx;
	}

	.app-name {
		font-size: 48rpx;
		font-weight: 600;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
		background: linear-gradient(135deg, #0093E9 0%, #80D0C7 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.app-slogan {
		font-size: 28rpx;
		color: #888;
		display: block;
	}

	.input-field {
		padding: 20rpx 0;
		font-size: 32rpx;
	}

	.login-actions {
		margin-top: 60rpx;
	}

	.login-button {
		width: 100%;
		height: 90rpx;
		font-size: 34rpx;
		background: linear-gradient(135deg, #0093E9 0%, #80D0C7 100%);
		border: none;
		box-shadow: 0 5rpx 15rpx rgba(0, 147, 233, 0.2);
	}

	.register-link {
		text-align: center;
		margin-top: 40rpx;
		font-size: 28rpx;
		color: #666;
	}

	.link-text {
		color: #0093E9;
		margin-left: 10rpx;
		font-weight: 500;
	}

	.footer {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		color: #999;
		padding: 10rpx 0;
		background: #ffffff;
	}

	.footer-link {
		color: #0093E9;
		text-decoration: none;
		margin-top: 10rpx;
		display: inline-block;
	}
</style>
